<template>
  <Main>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="表单名称">
        <el-input
          size="small"
          v-model="formInline.name"
          placeholder="表单名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="流程名称">
        <el-input
          size="small"
          v-model="formInline.modelName"
          placeholder="流程名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="流程分类">
        <el-select
          v-model="formInline.categoryId"
          clearable
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.objectId"
            :label="item.type"
            :value="item.objectId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="fetch()"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="add()" size="small" icon="el-icon-plus"
      >新建表单</el-button
    >
    <el-table
      :empty-text="emptyText"
      :data="tableData"
      style="width: 100%"
      row-key="kid"
      default-expand-all
      @sort-change="sortChange"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="表单名称" sortable></el-table-column>
      <el-table-column prop="code" label="表单编码"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" :formatter="timeFormat"></el-table-column>
      <el-table-column prop="modelName" label="流程名称"></el-table-column>
      <el-table-column prop="runType" label="表单模式">
        <template slot-scope="scope">
          <el-switch
            :value="scope.row.runType | filter"
            active-color="#13ce66"
            inactive-color="#C0CCDA"
            @click.native="selectModul(scope)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="表单管理" width="180px">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="复制url"
            placement="top-start"
          >
            <el-button type="primary" size="small" @click="copyUrl(scope.row)">
              <i class="el-icon-copy-document"></i>
            </el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="编辑"
            placement="top-start"
          >
            <el-button
              type="primary"
              size="small"
              @click="edit(scope.row.objectId)"
            >
              <i class="el-icon-edit"></i>
            </el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="删除"
            placement="top-start"
          >
            <el-button size="small" @click="del(scope.row.objectId)">
              <i class="el-icon-delete"></i>
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="附件设定" width="80px">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="附件设置的crud"
            placement="top-start"
          >
            <el-button
              type="primary"
              size="small"
              @click="accessory(scope.row.objectId)"
            >
              <i class="el-icon-paperclip"></i>
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="表单制作" width="180px">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="表单同步" placement="top-start">
            <el-button type="primary" size="small" @click="synchronization(scope.row.objectId)">
              <i class="el-icon-refresh"></i>
            </el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="表单绘制"
            placement="top-start"
          >
            <el-button
              type="primary"
              size="small"
              @click="drawForm(scope.row.objectId)"
            >
              <i class="el-icon-magic-stick"></i>
            </el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="表单源码编辑"
            placement="top-start"
          >
            <el-button
              type="primary"
              size="small"
              @click="editFormHtml(scope.row.objectId)"
            >
              <i class="el-icon-edit"></i>
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="表单设置" width="200px">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="复制"
            placement="top-start"
          >
            <el-button type="primary" size="small">
              <i class="el-icon-document-copy"></i>
            </el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="预览"
            placement="top-start"
          >
            <el-button
              type="primary"
              size="small"
              @click="preview(scope.row.objectId)"
            >
              <i class="el-icon-zoom-in"></i>
            </el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="测试"
            placement="top-start"
          >
            <el-button type="primary" size="small">
              <i class="el-icon-edit-outline"></i>
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <page
      :page="formInline.current"
      :limit="formInline.size"
      :total="formInline.total"
      @change="changePage"
    ></page>
    <Add ref="Add" @refresh="fetch"></Add>
    <Edit ref="Edit" @refresh="fetch"></Edit>
    <Accessory ref="Accessory" @refresh="fetch"></Accessory>
  </Main>
</template>
<script>
import Main from "@/components/basic-container/main";
import page from "@/components/basic-page/page";
import { activeUrl } from "@/config/env";
import Add from "./add";
import Edit from "./edit";
import Accessory from "./accessory/accessory";
const urls = {
  delete: activeUrl + "/form/form/delete",
  list: activeUrl + "/form/form/list",
  modul: activeUrl + "/modelList",
  drawForm: activeUrl + "/formjs/index.html?kid=",
  editFormHtml: activeUrl + "/resource/editor-form/form_edit.html?kid=",
  save: activeUrl + "/form/form/edit",
  get: activeUrl + "/form/form/edit_form",
  category_list: activeUrl + "/category/category/list",
  url: activeUrl + "/resource/form/form.html?form_id=",
  sync: activeUrl + "/form/editor/sync"
};
export default {
  methods: {
    sortChange(column, prop, order) {
      var order = {
        asc: column.order == "ascending",
        column: column.prop
      };
      var orders = [];
      orders.push(order);
      this.formInline.orders = orders;
      this.fetch();
    },
    timeFormat(row, column) {
      // 工作流时间格式化
      return new Date(+new Date(row.createTime) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
    },
    changePage(val) {
      this.formInline.current = val;
      this.fetch();
    },
    add: function() {
      this.$refs.Add.show(this.modelId);
    },
    edit: function(objectId) {
      this.$refs.Edit.show(objectId, this.modelId);
    },
    accessory: function(objectId) {
      this.$refs.Accessory.show(objectId);
    },
    del: function(objectId) {
      this.$confirm("确认要删除该表单吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        axios.get(urls.delete, { params: { objectId: objectId } }).then(res => {
          this.$message(res.data.result);
          this.fetch();
        });
      });
    },
    fetch() {
      axios.post(urls.list, this.formInline).then(res => {
        const data = res.data.result;
        this.tableData = data.records;
        this.emptyText = "暂无数据"
        this.formInline.current = data.current;
        this.formInline.size = data.size;
        this.formInline.total = data.total;
      });
    },
    categoryFetch() {
      axios.get(urls.category_list).then(res => {
        this.options = res.data.result;
        this.fetch();
      });
    },
    drawForm(objectId) {
      //表单绘制
      window.open(urls.drawForm + objectId);
    },
    editFormHtml(objectId) {
      window.open(urls.editFormHtml + objectId);
    },
    preview() {
      //预览
      //window.open("https://www.baidu.com/");
    },
    test() {
      //测试
    },
    synchronization(id) {
      //表单同步
      this.$confirm("确认要同步表单吗?表单同步后将覆盖之前的表单", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        axios.get(urls.sync, { params: { form_id: id } });
      });
    },
    copyUrl(scope) {
      //复制url
      this.shearPlate(urls.url + scope.objectId);
      this.$message({
        message: "复制成功",
        type: "success"
      });
    },
    shearPlate(text) {
      //复制到剪切板
      var node = document.createElement("input");
      node.value = text;
      document.body.appendChild(node);
      node.select();
      var res = document.execCommand("copy");
      document.body.removeChild(node);
      return res;
    },
    selectModul(sc) {
      //选择模式
      if (sc.row.runType === "html") {
        sc.row.runType = "json";
        this.editForm({
          objectId: sc.row.objectId,
          runType: sc.row.runType
        });
      } else if (sc.row.runType === "json") {
        sc.row.runType = "html";
        this.editForm({
          objectId: sc.row.objectId,
          runType: sc.row.runType
        });
      } else {
      }
    },
    editForm(obj) {
      axios.get(urls.get, { params: { objectId: obj.objectId } }).then(res => {
        let data = res.data.result;
        this.form = {
          objectId: data.objectId,
          name: data.name,
          runType: obj.type,
          code: data.code,
          modelId: data.modelId
        };
        this.onSubmit();
      });
    },
    onSubmit() {
      axios.post(urls.save, this.form).then(res => {
        this.$message(res.data.result);
        this.dialogVisible = false;
        this.$emit("refresh");
      });
    }
  },
  mounted() {
    this.categoryFetch();
    this.modelId = this.$route.query.modelId;
  },
  filters: {
    filter(e) {
      //选择模式的过滤器
      if (e === "html") {
        return true;
      } else {
        return false;
      }
    },
    filterPage(e) {
      //是否为菜单和设置的过滤器
      switch (e) {
        case "是":
          return true;
          break;
        case "否":
          return false;
          break;
      }
    }
  },
  data() {
    return {
      formInline: {
        name: null,
        current: 1, // 当前页
        size: 10, // 每页条数
        total: 0, // 总条数
        orders: [], // 排序
        modelName: null,
        categoryId: null,
        modelId: this.$route.query.modelId, // 携带的模板id
        procdefId: this.$route.query.procdefId // 携带的模板id
      },
      tableData: [],
      options: [], // 分类数据
      form: {
        objectId: null,
        name: null,
        code: null,
        runType: "",
        modelId: ""
      },
      emptyText : "加载中"
    };
  },
  components: {
    Add,
    Edit,
    Main,
    page,
    Accessory
  }
};
</script>
